<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header">
        <el-button-group style="margin-right: 3px">
          <el-button type="primary" @click="expand()">
            <i class="el-icon-plus"></i>&nbsp;展开</el-button
          >
          <el-button type="primary" @click="collapse()"
            ><i class="el-icon-minus"></i>&nbsp;收起</el-button
          >
        </el-button-group>
        &nbsp;&nbsp;
        <el-button-group style="margin-right: 3px">
          <el-button type="primary"
            ><i class="el-icon-check"></i>&nbsp;保存</el-button
          >
        </el-button-group>
        &nbsp;&nbsp;
        <el-button-group style="margin-right: 3px">
          <el-button type="primary" @click="refresh"
            ><i class="el-icon-refresh"></i>&nbsp;刷新</el-button
          >
        </el-button-group>
      </div>
      <div class="card-body">
        <el-tree
          ref="selectTree"
          node-key="id"
          :data="data"
          :props="defaultProps"
          draggable
          :expand-on-click-node="false"
          :allow-drop="allowDrop"
          :allow-drag="allowDrag"
        >
          <!-- default-expand-all -->
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span>{{ node.label }}</span>
            <span>
              <i class="el-icon-plus" @click="append(data)"></i>
              <!-- <el-button type="primary" size="mini" @click="append(data)"
                >新增</el-button
              > -->
              <!-- <el-button type="primary" size="mini" @click="remove(node, data)"
                >删除</el-button
              > -->
              <i class="el-icon-delete" @click="remove(node, data)"> </i>
            </span>
          </span>
        </el-tree>
      </div>
    </el-card>
  </div>
</template>
<script>
import { prototype } from "apexcharts";
let id = 1000;
export default {
  data() {
    return {
      data: [
        {
          id: "1",
          label: "Index",
        },
        {
          id: "2",
          label: "Admin",
          children: [
            {
              id: "15",
              label: "Users",
            },
            { id: "16", label: "Roles" },
            {
              id: "17",
              label: "Permission",
            },
            { id: "18", label: "Menu" },
            {
              id: "19",
              label: "Extensions",
            },
          ],
        },
        {
          id: "3",
          label: "用户系统",
          children: [
            {
              id: "20",
              label: "用户列表",
            },
          ],
        },
        {
          id: "4",
          label: "小程序首页管理",
          children: [
            {
              id: "21",
              label: "菜单栏管理",
            },
            {
              id: "22",
              label: "开屏视频管理",
            },
            {
              id: "23",
              label: "Banner管理",
            },
            {
              id: "24",
              label: "天气、简讯管理",
            },
          ],
        },
        {
          id: "5",
          label: "商城管理",
          children: [
            {
              id: "25",
              label: "门票管理",
            },
            {
              id: "26",
              label: "民宿管理",
            },
            {
              id: "27",
              label: "特产管理",
            },
            {
              id: "28",
              label: "餐饮管理",
            },
          ],
        },
        {
          id: "6",
          label: "匠人匠心",
          children: [
            {
              id: "29",
              label: "素材管理",
              children: [
                {
                  id: "42",
                  label: "素材卡片管理",
                },
                {
                  id: "43",
                  label: "视频管理",
                },
              ],
            },
            {
              id: "30",
              label: "非遗体验",
              children: [
                {
                  id: "44",
                  label: "预约管理",
                },
              ],
            },
          ],
        },
        {
          id: "7",
          label: "文化锦囊",
          children: [
            {
              id: "31",
              label: "素材管理",
              children: [
                {
                  id: "45",
                  label: "文化锦囊卡片组",
                },
              ],
            },
            {
              id: "32",
              label: "文化锦囊管理",
            },
          ],
        },
        {
          id: "8",
          label: "驴友圈",
          children: [
            {
              id: "33",
              label: "内容审核",
            },
          ],
        },
        {
          id: "9",
          label: "求助圈",
          children: [
            {
              id: "34",
              label: "内容审核",
            },
          ],
        },
        {
          id: "10",
          label: "工单、客服、售后",
          children: [
            {
              id: "35",
              label: "工单管理",
            },
            {
              id: "36",
              label: "售后管理",
            },
          ],
        },
        {
          id: "11",
          label: "导览管理",
          children: [
            {
              id: "37",
              label: "路线管理",
            },
            {
              id: "38",
              label: "标点管理",
            },
            {
              id: "39",
              label: "景区管理",
            },
          ],
        },
        {
          id: "12",
          label: "文心匠旅",
          children: [
            {
              id: "40",
              label: "文心匠旅组别管理",
            },
            {
              id: "41",
              label: "文心匠旅管理",
            },
          ],
        },
        {
          id: "13",
          label: "小程序设置中心",
        },
        {
          id: "14",
          label: "订单管理",
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    expand(param) {
      let data = param == null ? this.data : param;
      let self = this;
      data.forEach((el) => {
        self.$refs.selectTree.store.nodesMap[el.id].expanded = true;
        el.children && el.children.length > 0 ? self.expand(el.children) : ""; // 子级递归
      });
    },
    collapse(param) {
      // console.log(param);
      let data = param == null ? this.data : param;
      let self = this;
      data.forEach((el) => {
        self.$refs.selectTree.store.nodesMap[el.id].expanded = false;
        el.children && el.children.length > 0 ? self.collapse(el.children) : ""; // 子级递归
      });
    },

    append(data) {
      // console.log(data);
      const newChild = { id: id++, label: "testtest", children: [] };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
    },
    remove(node, data) {
      console.log(node);
      console.log(data);
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },
    refresh() {
      location.reload();
    },
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>
<style scoped>
.custom-tree-node {
  display: flex;
  flex: 1;
  justify-content: space-between;
}
.card-body,
.card-footer {
  padding: 1.1rem;
}
</style>
